<template>
  <div class="headrer_btn">
    <div class="left_btn">
      <div class="logo_btn">
        <p style="font-size: 0.8rem;">[logo图片]+[公司名称]</p>
      </div>
      <!-- 控制左边导航菜单  收缩 按钮 -->
      <el-header>
        <div @click="isshow" class="i_foid">
          <i v-show="isCollapse == true" class="el-icon-s-fold"></i>
          <i v-show='isCollapse == false' class="el-icon-s-unfold"></i>
        </div>
      </el-header>
      <!-- 刷新按钮 -->
      <div @click="_refresh" class="redresh_btn">
        <i v-show='isRefresh == false' class="el-icon-refresh-left"></i>
        <i v-show='isRefresh == true' class="el-icon-loading"></i>
      </div>
    </div>
    <div class="middle">
      <!-- 搜索 -->
      <search></search>
    </div>
    <div class="right">
      <!-- 头像 -->
      <avatar></avatar>
    </div>

  </div>
</template>

<script>
  import eventBus from '@/assets/js/eventBus.js'
  import search from '@/components/search'
  import avatar from '@/components/Avatar'
  export default {
    data() {
      return {
        isCollapse: true, //菜单按钮收缩
        isRefresh: false, //是否在刷新
      }
    },
    components: {
      search,
      avatar
    },
    methods: {
      isshow() { //控制左边导航菜单
        this.isCollapse = !this.isCollapse
        eventBus.$emit("show", this.isCollapse) //$emit这个方法会触发一个事件
      },
      _refresh() { //页面重新刷新
        this.isRefresh = !this.isRefresh
        setTimeout(() => {
          this.isRefresh = false
        }, 1000);
      }
    },
  };
</script>

<style scoped>
  p {
    margin: 0vw;
  }

  .headrer_btn {
    height: 5vw;
    display: flex;
    align-items: center;
    width: 100%;
    /* background-color: rgba(56, 178, 255, .8); */
    background-color: #38B2FF;
  }

  .left_btn {
    display: flex;
    align-items: center;
    width: 18.75rem;
  }

  .middle {
    display: flex;
    align-items: center;
    width: calc(100% - 18.75rem - 15vw);
  }

  .right {
    width: 15vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .logo_btn {
    width: 80vw;
    text-align: center;
  }

  .el-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1vw 0 2vw;
    height: auto !important;
  }

  .i_foid i:nth-child(2) {
  }

  .redresh_btn {
    padding: 0 2vw 0 1vw;
  }
</style>
